<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="father">
        slot简单学习
        <div class="box">
            <Left>
                <span>这里是插槽的简单使用</span><br/>
                <!--v-slot:只能用在template或者组件上-->
                <template v-slot:mySlot>
                    <span style="color:red">这是在mySlot中的内容</span><br/>
                </template>
                <!--v-slot的简写-->
                <template #mySlot2>
                    <span style="color:red">简写v-slot</span><br/>
                </template>
            </Left>
        </div>
        <hr>
        具名插槽和作用域插槽学习
        <div>
            <Article>
                <template #header>
                    <h3>题西林壁</h3>
                </template>
                <template #content="scope">
                    <p>横看成岭侧成峰，远近高低各不同。</p>
                    <p>不识庐山真面目，只缘身在此山中。</p>
                    <p>使用=接收插槽的属性：{{scope}}</p>
                </template>
                <template #footer>
                    <h3>苏轼</h3>
                </template>
            </Article>
        </div>
    </div>
</template>

<script>
    import Left from '@/components/slot/Left.vue';
    import Article from '@/components/slot/Article.vue';
    export default {
        name: "Father",
        components:{
            Left,Article
        }
    }
</script>

<style scoped>
    .father{

    }
    .box{
        display: flex;
    }
</style>
